<template>
<!-- 占座记录 -->
  <div>
    <!-- 搜索 -->
    <div>
      <el-input v-model="formSearch.nickname" placeholder="请输入姓名" class="search"></el-input>
      <el-input v-model="formSearch.username" placeholder="请输入学号" class="search"></el-input>
      <el-button type="primary" plain @click="search()">搜索</el-button>
      <el-button @click="reset()">重置</el-button>
    </div>
    <!-- 列表 -->
    <BaseTable
       :tableData="tableData"
       :loading="loading"
       :clickRow="true"
       :page="page"
       @pageChange="pageChange"
      >
      <el-table-column prop="nickname" label="占座人"></el-table-column>
      <el-table-column prop="username" label="学号"></el-table-column>
      <el-table-column prop="roomName" label="教室名"></el-table-column>
      <el-table-column prop="place" label="位置" :formatter="placeFormat"></el-table-column>
      <el-table-column prop="startTime" label="开始时间" :formatter="dateFormat"></el-table-column>
      <el-table-column prop="estimateTime" label="预计结束时间" :formatter="dateFormat"></el-table-column>
      <el-table-column prop="endTime" label="实际结束时间">
        <template slot-scope="s">
          <div v-if="s.row.endTime">{{ moment(s.row.endTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
          <el-tag v-else type="warning">暂未结束</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="座位状态">
        <template slot-scope="s">
          <el-tag v-if="s.row.status === 1">已归还</el-tag>
          <el-tag type="danger" v-if="s.row.status === 2">占座中</el-tag>
        </template>
      </el-table-column>
    </BaseTable>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name:'seatlog',
  data(){
    return {
      moment,
      tableData: [],
      loading: false,
      formSearch: {
        nickname: '',
        username: '',
      }, 
      page: {
        page: 1,
        limit: 10,
        total: 0
      },
    }
  },
  activated(){
    this.initData();
  },
  mounted() {
    this.initData();
  },
  components: {
    BaseTable: () => import("components/BaseTable"),
  },
  methods:{
    //格式化时间
    dateFormat:function(row,column){
      var date = row[column.property];
      if(date == undefined){return ''};
      return moment(date).format("YYYY-MM-DD HH:mm:ss")
    },
    //格式化位置
    placeFormat:function(row,column){
      var seat = row[column.property];
      if(seat == undefined){return ''};
      return `${seat.split(',')[0]}排${seat.split(',')[1]}列`
    },
    //搜索
    search(){
      this.page.page = 1 
      this.initData()
    },
    //重置
    reset() {
      this.formSearch.nickname = '',
      this.formSearch.username = '',
      this.page.page = 1;
      this.page.total = 0;
      this.initData();
    },
    //分页
    pageChange(val) {
      this.page = val;
      this.initData();
    },
    //列表
    initData() {
     this.loading = true;
     this.$http.get("seats/listSeatlog",{ params :{
        page: this.page.page,
        limit: this.page.limit,
        nickname: this.formSearch.nickname,
        username: this.formSearch.username,
     }})
       .then((res) => {
        console.log(res)
        if (res.status === 200) {
          this.tableData = res.data.data;
          this.page.total = res.data.total;
          console.log(this.tableData,444)
        }
        this.loading = false;
       })
       .catch((err) => {
         this.loading = false;
         this.$message.error("查询数据失败")
       })    
    },
  },
}
</script>

<style lang="scss" scoped>
.search{
  width: 15%;
  margin-right: 15px;
}
.add{
  float: right;
  margin-right: 25px;
}
</style>